<template>
  <div class="choose-userlist">
    <!-- 按钮START -->
    <el-button style="margin-bottom:5px;" type="primary" @click="tableShow">选择平台</el-button>
    <!-- 按钮END -->

    <!-- 选择器START -->
    <el-dialog
      width="55%"
      custom-class="wlm-form-dialog dialog-table"
      :append-to-body="true"
      :visible.sync="dialogTableVisible"
    >
      <!-- HEADER -->
      <div class="wlm-dialog-fixheader">
        <span class="wlm-dialog-inlenr">平台列表</span>
      </div>
      <!-- HEADER -->

      <!-- BODY START -->
      <el-scrollbar>
        <div class="wlm-table-header" style="margin-bottom:-30px;margin-top:20px;">
          <!-- 搜索表单START -->
          <el-form
            :model="tableFormatData.platformTable.files"
            size="small"
            label-width="60px"
            class="retail-form"
            label-position="right"
          >
            <el-form-item label class="filter" label-width="20px">
              <el-form-item label="平台：" class="search">
                <el-input
                  v-model="tableFormatData.platformTable.files.name"
                  placeholder="请输入平台名称"
                  style="width:160px;"
                ></el-input>
                <el-button style="margin-left:10px;" type="primary" @click="filesSerch">搜索</el-button>
                <!-- <el-button type="text" @click="filesEmpty">刷新</el-button> -->
              </el-form-item>
            </el-form-item>
          </el-form>

          <!-- 搜索表单END -->
        </div>
        <div class="wlm-table-content">
          <div class="wlm-dialog-main">
            <!-- 表格START -->
            <el-table
              :ref="tableFormatData.platformTable.key"
              :data="tableFormatData.platformTable.tableData"
              style="width: 100%"
            >
              <el-table-column prop="date" label width="55">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.checked" @change="handleSelectionChange(scope)"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="平台名称" header-align="left" align="left">
                <template slot-scope="scope">
                  <span>{{scope.row.name}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="登录账号" header-align="left" align="left">
                <template slot-scope="scope">
                  <span>{{scope.row.user_name}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="所属用户" header-align="left" align="left">
                <template slot-scope="scope">
                  <span>{{scope.row.real_name}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="剩余天数" header-align="left" align="left">
                <template slot-scope="scope">
                  <span>{{scope.row.endtime }}</span>
                </template>
              </el-table-column>
            </el-table>
            <!-- 表格START -->
          </div>
        </div>
      </el-scrollbar>

      <!-- 分页START -->
      <div class="pagination-content flex-row flex-justify-b flex-align-c">
        <el-row class="pagination-btns"></el-row>
        <el-pagination
          style="margin-top:20px;margin-bottom:20px;margin-right: 25px;"
          :disabled="!hasTableData"
          @size-change="listPageChange"
          @current-change="listPageChange"
          :current-page.sync="tableFormatData.platformTable.pagination.page"
          :page-sizes="tableFormatData.platformTable.pagination.pagesizes"
          :page-size.sync="tableFormatData.platformTable.pagination.list_rows"
          layout="total, sizes, prev, pager, next, jumper"
          :total="hasTableData?tableFormatData.platformTable.pagination.total : 0"
        ></el-pagination>
        <!-- 分页END -->
      </div>
      <!-- 页脚 -->
      <div class="wlm-dialog-fixfooter">
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogTableVisible = false;output(selectRow)">确 定</el-button>
        </span>
      </div>
      <!-- 页脚 -->
    </el-dialog>

    <!-- BODY END -->
  </div>
</template>

<script>
import { platformIndex } from '@/api/platform' // 加载接口
import mixins from '@/mixins/mixins'

export default {
  mixins: [mixins.getters('Table')], // 混入表单
  props: {
    // 定义回调属性
    response: {
      type: Function,
      default: function() {
        return
      }
    }
  },
  watch: {},
  computed: {},
  data() {
    return {
      dialogTableVisible: false, // 控制选择器是否显示 false 不显示，true 显示
      selectRow: {}, // 当前选中数据
      /**
       * 表单数据
       */
      tableFormatData: {
        current: 'platformTable',
        platformTable: {
          key: 'platformTable',
          api: {
            getList: platformIndex // 列表接口 platformIndex
          },
          tableData: [],
          // 用户搜索字段
          files: {
            name: ''
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
    }
  },
  components: {},
  methods: {
    // 点击确定，调用response属性方法给父组件
    output(row) {
      if (
        Object.prototype.toString.call(this.response) === '[object Function]'
      ) {
        console.log(this.response)
        this.response(row)
      }
    },
    // 勾选数据处理
    handleSelectionChange(row) {
      // 选中数据，点击确定后反出
      this.selectRow = row.row

      // this.selectRow.checked = true;
      this.tableFormatData.platformTable.tableData.map((value, index) => {
        if (index !== row.$index) {
          this.$set(value, 'checked', false)
        }
      })
    },
    // 点击选择平台按钮弹出平台选择器
    tableShow() {
      this.dialogTableVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.choose-userlist {
  margin-bottom: 10px;

  /deep/ .pagination-content .el-input {
    width: 100px;
  }

  .tag-list .el-tag {
    width: auto;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 5px;

    & + .el-tag {
      margin-left: 5px;
    }
  }
}
</style>
